<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    <style>
        .swiper-container {
            width: 600px;
            height: 230px;
        }

        @media screen and (max-width: 500px) {

            * {
                margin: 0;
                padding: 0;
                outline: none;
                list-style: none;

            }

            body {
                background-color: lightblue
            }

            .swiper-container {
                width: 98%;
                height: 230px;
            }

            .swiper-slide {
                margin: 0px auto;
            }

            .tou {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 50px;
            }

            .t1 {
                height: 100%;
                width: 10%;
                background: url(img/gang.jpg)no-repeat center center / 50% 30%;

            }

            .t2 {
                height: 100%;
                width: 60px;
            }

            .wenzi {
                height: 18px;
                width: 70%;
                margin-top: -20px;
                margin-left: 12px;
                font-size: 13px
            }

            .t3 {
                height: 100%;
                width: 200px;
            }

            .t4 {
                height: 100%;
                width: 12%;
            }

            .t5 {
                height: 100%;
                width: 16%;
            }

            .ji {
                display: flex;
                height: 18px;
                width: 340px;
                margin: 10px auto;
                justify-content: space-between
            }

            .ji1 {
                width: 37%;
                height: 100%;
            }

            .ji2 {
                width: 28%;
                height: 100%;
                margin-left: 6px
            }

            .ji3 {
                width: 30%;
                height: 100%;
            }

            .fang {
                float: left;
                height: 15px;
                width: 15px;
                background: url(img/fang.jpg)no-repeat;
                background-position: 0 -13px;
                background-size: 90px auto
            }

            .zi {
                float: left;
                width: 80%;
                height: 100%;
                font-size: 12px;
                color: #C69C6D;
            }

            .fenlan {
                display: flex;
                justify-content: space-between;
                height: 40%;
                width: 90%;
                border-bottom: 1px solid #C69C6D;
                margin: 10px auto;
            }

            .fenlan li {
                width: 23%;
                height: 100%;

            }

            .fe {
                font-weight: thin;
                font-size: 13px;
                margin-left: 20px;
            }

            .last {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 90%;
                height: 140%;
                margin: 2px auto;
            }

            .la1 {
                height: 25%;
                width: 100%;
            }

            .la2 {
                height: 115%;
                width: 100%;
                background: url(img/b.jpg)no-repeat center center / 100% 100%
            }

            .la3 {
                height: 20%;
                width: 100%;
            }

            .la3z {
                float: left;
                height: 100%;
                width: 50%;
                margin-top: 10px
            }

            .la3y {
                float: right;
                width: 20%;
                height: 80%;
                margin-top: 10px;
                background: url(img/fang.jpg)no-repeat;
                background-position: -50px -1px;
                background-size: 101px 50px;

            }
        }

        @media screen and (min-width:1024px) {

            * {
                margin: 0;
                padding: 0;
                outline: none;
                list-style: none;

            }

            .tou {
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            .t2 {
                width: 150px;

            }

            .t1 {
                height: 100%;
                width: 40px;
                background: url(img/gang.jpg)no-repeat center center / 50% 50%;

            }

            .t2 {
                height: 100%;
                width: 100px;
            }

            .wenzi {
                height: 18px;
                width: 70%;
                margin-top: -20px;
                margin-left: 12px;
                font-size: 13px
            }

            .t3 {
                height: 100%;
                width: 1200px;
            }

            .t4 {
                height: 100%;
                width: 80px;
            }

            .t5 {
                height: 100%;
                width: 80px;
            }


            .swiper-container {
                width: 98%;
                height: 530px;
            }

            .ji {
                display: flex;
                height: 18px;
                width: 100%;
                margin: 10px auto;
                justify-content: space-between
            }

            .ji1 {
                width: 200px;
                height: 100%;
            }

            .ji2 {
                width: 130px;
                height: 100%;
                margin-left: 6px
            }

            .ji3 {
                width: 130px;
                height: 100%;
            }

            .fang {
                float: left;
                height: 15px;
                width: 15px;
                background: url(img/fang.jpg)no-repeat;
                background-position: 0 -13px;
                background-size: 90px auto
            }

            .zi {
                float: left;
                width: 80%;
                height: 100%;
                font-size: 12px;
                color: #C69C6D;
            }

            .fenlan {
                display: flex;
                justify-content: space-between;
                height: 60%;
                width: 100%;
                border-bottom: 1px solid #C69C6D;
                margin: 10px auto;
            }

            .fenlan li {
                width: 60%;
                height: 100%;

            }

            .fe {
                width: 20%;
                font-weight: thin;
                font-size: 15px;
                margin-left: 130px;
                margin-top: -30px
            }

            .last {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 90%;
                height: 140%;
                margin: 2px auto;
            }

            .la1 {
                height: 25%;
                width: 100%;
            }

            .la2 {
                height: 115%;
                width: 100%;
                background: url(img/b.jpg)no-repeat center center / 100% 100%
            }

            .la3 {
                height: 20%;
                width: 100%;
            }

            .la3z {
                float: left;
                height: 100%;
                width: 50%;
                margin-top: 10px
            }

            .la3y {
                float: right;
                width: 20%;
                height: 80%;
                margin-top: 10px;
                background: url(img/fang.jpg)no-repeat;
                background-position: -50px -1px;
                background-size: 101px 50px;

            }


        }
    </style>
</head>

<body>
    <div class="tou">
        <div class="t1"></div>
        <div class="t2">
            <div style="margin-top:15px"><img src="img/dingwei.jpg" alt="" height="15px" width="13px"></div>
            <div class="wenzi">上海</div>
        </div>
        <div class="t3">
            <div style="height: 25px;width: 30px;margin: 12px auto"> <img src="img/biaoti.jpg" alt="" height="25px"
                    width="30px"></div>
        </div>
        <div class="t4">
            <div style="margin:15px"><img src="img/xiaoxi.jpg" alt="" width="26px" height="20px"></div>
        </div>
        <div class="t5">
            <div style="margin:15px"><img src="img/cart.jpg" alt="" width="26px" height="20px"></div>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/wukong.jpg" alt="" height="102%" width="100%">
            </div>
            <div class="swiper-slide">
                <img src="img/keke.jpg" alt="" height="102%" width="100%">
            </div>
            <div class="swiper-slide">
                <img src="img/meigui.jpg" alt="" height="102%" width="100%">
            </div>
        </div>
        <div class="ji">
            <div class="ji1">
                <div class="fang"></div>
                <div class="zi">新人首单送小切块</div>
            </div>
            <div class="ji2">
                <div class="fang"></div>
                <div class="zi">满100包邮</div>
            </div>
            <div class="ji3">
                <div class="fang"></div>
                <div class="zi">全程冷链配送</div>
            </div>
        </div>

        <ul class="fenlan">
            <li>
                <div style="margin-left: 10px"><img src="img/a.jpg" alt="" height="80%" width="80%"></div>
                <div class="fe">蛋糕</div>
            </li>
            <li>
                <div style="margin-left: 10px"><img src="img/a.jpg" alt="" height="80%" width="80%"></div>
                <div class="fe">蛋糕</div>
            </li>
            <li>
                <div style="margin-left: 10px"><img src="img/a.jpg" alt="" height="80%" width="80%"></div>
                <div class="fe">蛋糕</div>
            </li>
            <li>
                <div style="margin-left: 10px"><img src="img/a.jpg" alt="" height="80%" width="80%"></div>
                <div class="fe">蛋糕</div>
            </li>
        </ul>


        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>
        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2" style="background:url(img/caomei.jpg)no-repeat center center / 100% 100%"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>
        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2" style="background:url(img/meigui.jpg)no-repeat center center / 100% 100%"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>
        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2" style="background:url(img/hongjiu.jpg)no-repeat center center / 100% 100%"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>
        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2" style="background:url(img/liulian.jpg)no-repeat center center / 100% 100%"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>
        <ul class="last">
            <li class="la1">
                <div
                    style="float:left;width:50px; height:20px;background:rgb(199, 168, 138);margin: 10px;border-radius: 10px;text-align: center;font-size: 13px">
                    新品</div>
                <div style="float:right;margin-top:10px;font-size: 13px">更多>></div>
            </li>
            <li class="la2" style="background:url(img/heibai.jpg)no-repeat center center / 100% 100%"></li>
            <li class="la3">
                <div class="la3z"><span style="color:#322418;font-size:18px">可可岛&nbsp;<span
                            style="color:#C69C6D;font-size:15px">228元</span><span
                            style="color:rgb(75, 72, 72);font-size: 12px">/2.0磅</span>
                        <p style="color:#442818;font-size: 12px">隐藏着春天的岛屿</p>
                    </span>
                </div>
                <div class="la3y">

                </div>
            </li>
        </ul>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>


    <script>
        var mySwiper = new Swiper('.swiper-container', {

            loop: true, // 循环模式选项
            autoplay: true,
            effect: "cube",
            pagination: {
                el: '.swiper-pagination'

            }
        })
    </script>
</body>

</html>